<template>
	<div class="page-container">
		<div class="search-container">
			<el-form :inline="true" ref="form" size="small">
				<!-- <el-form-item label="统计时间">
					<el-date-picker
						v-model="searchData.date"
						align="right"
					></el-date-picker>
				</el-form-item> -->
				<el-form-item label="统计时间">
						<el-date-picker
							v-model="searchData.rangeDate"
							type="daterange"
							align="right"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							:picker-options="pickerOptions"
						></el-date-picker>
					</el-form-item>
        <el-form-item label="SKU">
          <el-select v-model="searchData.sku" clearable>
            <el-option v-for="item in Object.keys(SKU)" :key="item" :label="SKU[item]" :value="item"></el-option>
          </el-select>
        </el-form-item>
				<el-button type="primary" @click="onSearch" size="small">查询</el-button>
				<el-button @click="onReset" size="small">重置</el-button>
			</el-form>
		</div>
		<el-table class="mt-20 el-table-modify" :data="tableData" border show-summary>
			<el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
			<el-table-column prop="productName" align="center" label="产品名称"></el-table-column>
			<el-table-column prop="brandName" align="center" label="所属品牌"></el-table-column>
			<el-table-column prop="region" align="center" label="领用地区"></el-table-column>
			<el-table-column prop="phone" align="center" label="领取人手机号"></el-table-column>
			<el-table-column prop="saler" align="center" label="销售员"></el-table-column>
      <el-table-column prop="exchangeDate" align="center" label="领取时间">
				<template slot-scope="scope">{{scope.row.exchangeDate | dateFrm}}</template>
			</el-table-column>
		</el-table>
		<el-pagination
			ref="pagination"
			class="mt-20"
			background
			:page-size.sync="pageOption.pageSize"
			:total="pageOption.total"
			@size-change="onSizeChange"
			@current-change="onPageChange"
			layout="slot,->,prev,pager,next,sizes,jumper"
		>
			<span class="pagination-title">
				共 {{ pageOption.total }} 条记录 第 {{ pageOption.page }} /
				{{ pageOption.pageTotal }} 页
			</span>
		</el-pagination>
	</div>
</template>

<script>
import { exchangeCodeByDate } from "@/api/report";
import { pickerOptions, momentFormatStr, SKU } from "@/utils/const";
import moment from "moment";

export default {
	name: "ExchangeCode",
	data() {
    this.pickerOptions = pickerOptions;
    this.SKU = SKU;
		let date = this.$route.params.date

		this.defaultDate = date ? moment(date, momentFormatStr.date) : new Date()

		return {
      searchData: {
				sku: '',
				rangeDate: [this.defaultDate, this.defaultDate],
      },
			tableData: [],
			pageOption: {
				page: 1,
				pageSize: 20,
				total: 0,
				pageTotal: 1
			}
		};
	},
	methods: {
		onSearch() {
			this.pageOption.page = 1;
			this.requestData();
		},
		onReset() {
			this.pageOption.page = 1;
			this.rangeDate = [this.defaultDate, this.defaultDate],
			this.requestData();
		},
		async requestData() {
      const { page, pageSize: size } = this.pageOption,
        {sku, rangeDate} = this.searchData,
        params = { page: page - 1, size };
			if (sku) {
				params.sku = sku;
			}
			if (rangeDate[0]) {
				params.start = moment(rangeDate[0]).format(momentFormatStr.date);
				params.end = moment(rangeDate[1]).format(momentFormatStr.date);
			}
			const { data, total } = await exchangeCodeByDate(params);
			this.tableData = data;
			this.pageOption.total = total;
			this.pageOption.pageTotal = total ? Math.ceil(total / size) : 1;

			if (this.$refs.pagination) {
				let childrenRefs = this.$refs.pagination.$children;
				this.$nextTick(() => {
					childrenRefs.forEach(child => child.$forceUpdate());
				});
			}
		},
		onSizeChange(size) {
			this.pageOption.pageSize = size;
			this.requestData();
		},
		onPageChange(page) {
			this.pageOption.page = page;
			this.requestData();
    },
    linToDetailed(row) {
      this.$router.push({name: 'withdrawMgt'})
    }
	},
	created() {
		this.requestData();
	}
};
</script>

<style lang="scss">
</style>
